<style>
	.tab {
		border: 1px #f5f5f5 solid;
	}
	.tab .tab-icons {
		position: relative;
		flex: 0 0 45px;
	}
	.tab-icons::after{
		content: '';
		position: absolute;
		top: 12px;
		bottom: 12px;
		left: 0;
		width: 1px;
		background-color: #ddd;
	}
	.tab .tab-scroll {
		overflow: hidden;
	}
	.tab .tab-scroll .tab-scroll__box {
		display: flex;
		flex-wrap: nowrap; // 不换行
		align-items: center; // 垂直居中
		height: 50px;
		
	}
	.tab .tab-scroll .tab-scroll__box .tab-scroll__item {
		flex-shrink: 0;
		font-size: 14px;
		/* color: #666; */
		padding: 0 10px;
		
	}
	.tab_unactive {
		color: #666;
	}
	.tab_active {
		color: #007aff;
	}
</style>

<template>
	<view class="tab flex align-center bac-color-fff box-b w-100" v-if="list.length">
		<scroll-view class="tab-scroll flex-1 box-b" scroll-x>
			<view class="tab-scroll__box box-b">
				<view class="tab-scroll__item "  :class="activeIndex==index?'tab_active':'tab_unactive'" v-for="(item,index) in list" :key="index"
					@click="clickTab(item,index)">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="tab-icons flex align-center justify-around" @click="open" v-if="isShowIcon">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tab",
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			tabIndex: {
				type: Number,
				default () {
					return 0
				}
			},
			isShowIcon:{
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				activeIndex: 0
			};
		},
		mounted() {
			this.activeIndex = this.tabIndex
		},
		watch: {
			tabIndex(newVal, oldVal) {
				this.activeIndex = newVal
			}
		},
		methods: {
			open(){
				uni.navigateTo({
					url:'/pages/home-label/home-label'
				})
			},
			clickTab(item, index) {
				this.activeIndex = index
				this.$emit('tab', {
					data: item,
					index
				})
			}
		}
	}
</script>
